<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <div class="block">
                <div class="content">
                    <div class="orderinfo">
                        <div class="row">
                            <div class="nominal">买家留言:</div>
                            <div class="text">{{ userMessage }}</div>
                        </div>
                        <div class="row">
                            <div class="nominal">订单金额:</div>
                            <div class="text">{{ goodsPrice }}元</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block">
                <div class="title">
                    选择支付方式
                </div>
                <div class="content">
                    <div class="">

                        <div class="" style="display: flex;align-items: center;">
                            <div class="">
                                <img src="@/assets/image/wxpay.png" style="width: 64px;height: 64px;" />
                            </div>
                            <div class="" style="padding-left: 20px;font-size: 14px;">
                                微信支付
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="pay">
                <div class="btn" @click="doDeposit">立即支付</div>
                <div class="tis">
                    点击立即支付，即代表您同意<div class="terms">
                        《条款协议》
                    </div>
                </div>
            </div>


        </div>
        <el-dialog title="支付二维码" width="30%" :visible.sync="showQrcode">
            <div style="text-align: center;">
                <img :src="qrCodeUrl" alt="二维码">
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { orderinfoShop, orderinfoShopApp, orderinfoDetails } from "@/api/index"
import QRCode from 'qrcode';
export default {
    computed: {
        currentPath() {
            return '/shop'; // 获取当前路由路径
        },
    },
    data() {
        return {
            show: false,
            orderNo: null,
            amount: 0,
            orderName: '',
            paytype: 'alipay',//支付类型,
            userMessage: '',
            userAddressId: '',
            goodsPrice: "",
            orderData: [],
            id: '',
            showQrcode: false,
            qrCodeUrl: '',
            type: ''
        };
    },
    mounted() {
        this.type = this.$route.query.type;
        if (this.$route.query.type == 'normal') {
            this.orderData = JSON.parse(this.$route.query.orderData);
            this.userMessage = this.$route.query.userMessage;
            this.userAddressId = this.$route.query.userAddressId;
            this.goodsPrice = this.$route.query.goodsPrice;

        } else if (this.$route.query == 'order') {
            this.id = this.$route.query.id;
            this.userMessage = this.$route.query.userMessage;
            this.goodsPrice = this.$route.query.price;

        }

        console.log(this.orderData, this.userMessage, this.userAddressId)
    },
    methods: {
        orderinfoPayData(id) {
            orderinfoShopApp({ id: id }).then((res) => {
                if (res.code == 200) {
                    console.log(res, "2222支付网页")
                    const { codeUrl } = res.data;
                    this.generateQRCode(codeUrl);
                    this.startPolling();
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        startPolling() {
            console.log("开始轮询", this.id)
            this.pollingTimer = setInterval(async () => {
                orderinfoDetails(this.id).then((res) => {
                    console.log(res, "查询订单")
                    if (res.code == 200) {
                        if (res.data.status == 1) {
                            this.$message.success("支付成功")
                            clearInterval(this.pollingTimer); // 支付成功，停止轮询
                            this.showQrcode = false;
                            setTimeout(() => {
                                this.$router.replace({
                                    path: '/shopSuccess',
                                    query: {
                                        orderNo: this.id,
                                        goodsPrice: this.goodsPrice,
                                    }
                                })
                            }, 1000);

                        }
                    }
                })
            }, 3000); // 每3秒查询一次
        },
        async generateQRCode(url) {
            try {
                const qrImage = await QRCode.toDataURL(url, {
                    width: 200,
                    margin: 2
                });
                this.showQrcode = true;
                this.qrCodeUrl = qrImage; // 绑定到<img :src="qrCodeUrl">
            } catch (err) {
                console.error('生成二维码失败:', err);
            }
        },
        orderinfoShopData() {
            let skus = []
            this.orderData.forEach((res) => {
                skus.push({
                    spuId: res.spuId,
                    quantity: res.number,
                    paymentPrice: res.salesPrice,
                    freightPrice: 0
                })
            })
            let data = {
                paymentWay: '2',
                deliveryWay: '1',
                paymentType: '1',
                userMessage: this.userMessage,
                userAddressId: this.userAddressId,
                orderType: '0',
                skus: skus
            }
            orderinfoShop(data).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    console.log(res)
                    if (res.data.id && res.data.orderNo) {
                        this.orderNo = res.data.orderNo;
                        this.orderinfoPayData(res.data.id)
                        this.id = res.data.id;

                    }
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        confirm() {
            this.show = false;
            uni.reLaunch({
                url: '/pages/pay/success/success?orderNo=' + this.orderNo
            })
        },
        doDeposit() {
            if (this.type == 'order') {
                //#ifdef APP-PLUS
                this.show = true
                //#endif
                //#ifdef MP-WEIXIN
                this.orderinfoPayData(this.id)
                //#endif

            } else if (this.type == 'normal') {
                this.orderinfoShopData()
            }
            //模板模拟支付，实际应用请调起微信/支付宝
            uni.showLoading({
                title: '支付中...'
            });


        }
    }
}
</script>

<style lang="scss">
.block {
    width: 94%;
    padding: 0 3% 40px 3%;

    .title {
        width: 100%;
        font-size: 16px;
    }

    .content {
        .orderinfo {
            width: 100%;
            border-bottom: solid 1px #eee;

            .row {
                width: 100%;
                height: 90px;
                display: flex;
                align-items: center;

                .nominal {
                    flex-shrink: 0;
                    font-size: 16px;
                    color: #7d7d7d;
                }

                .text {
                    width: 70%;
                    margin-left: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 16px;
                }
            }
        }


    }
}

.pay {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .btn {
        width: 30%;
        height: 40px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #91512b;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    }

    .tis {
        margin-top: 10px;
        width: 100%;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: baseline;
        color: #999;

        .terms {
            color: #5a9ef7;
        }
    }
}
</style>
